<template>
	<view class="content">
		<NavBar class="nav_bar"></NavBar>
		<view class="main_box">
			<Tabs class="tabs"></Tabs>
			<swiper v-if="videoList.length" :vertical="true" class="video_box" @change="scrollHandle">
				<swiper-item v-for="item in videoList" :key="item._id">
					<MyVideo :videoData="item" @videoPlayChange="changePlay"></MyVideo>
				</swiper-item>
			</swiper>
		</view>
		<TabBer></TabBer>
	</view>
</template>

<script>
	import MyVideo from "./indexComponents/myVideo.vue"
	import NavBar from "./indexComponents/navBar.vue"
	import TabBer from "./indexComponents/tabBar.vue"
	import Tabs from "./indexComponents/tabs.vue"
	export default {
		components: {
			MyVideo,
			NavBar,
			TabBer,
			Tabs
		},
		data() {
			return {
				videoList: []
			}
		},
		methods: {
			scrollHandle(event) {
				const {
					current
				} = event.detail
				this.videoList.forEach((item, index) => {
					if (index === current) {
						item.playIng = true
					} else {
						item.playIng = false
					}
				})

			},
			changePlay(id) {
				this.videoList.forEach(item => {
					if (item._id === id) {
						item.playIng = !item.playIng
					}
				})
			},
			getVideo() {
				const that = this
				uni.request({
					url: "https://bdb24c6d-8c19-4f80-8e7e-c9c9f037f131.bspapp.com/video",
					method: "POST",
					data: {
						info: "get_video"
					},
					success(res) {
						const {
							data
						} = res.data
						for (let video of data) {
							that.videoList.push(video)
						}

					}
				})
			}
		},
		onLoad() {
			this.getVideo()
		},

	}
</script>

<style scoped>
	.content {
		background-color: #010101;
		width: 100vw;
		position: relative;
	}

	.main_box {
		width: min(100%, 750px);
		height: calc(100vh - 52px);
		position: relative;
		left: 50%;
		transform: translate(-50%, 0);
	}

	.video_info {
		bottom: 0;
	}

	.video_box {
		width: 100%;
		height: 100%;
		overflow-y: auto;
	}


	.tabs {
		position: absolute;
		top: 44px;
		z-index: 100
	}
</style>
